<script setup>



    let obj = [
        {
            imger: "/src/views/tb/imgs/书11.jpg",
            shuming: "温柔的确定性",
            zuozhe: "哈丽娜"
        },
        {
            imger: "/src/views/tb/imgs/书12.jpg",
            shuming: "与父亲的奥德赛",
            zuozhe: "丹尼尔"
        },
        {
            imger: "/src/views/tb/imgs/书13.jpg",
            shuming: "重逢 最后的对话3",
            zuozhe: "豪尔赫"
        },
        {
            imger: "/src/views/tb/imgs/书14.jpg",
            shuming: "阿涅丝的最后一个下午",
            zuozhe: "弗朗索瓦·里卡尔"
        },
        {
            imger: "/src/views/tb/imgs/书15.jpg",
            shuming: "论里尔克",
            zuozhe: "冯至"
        },
    ]
    let obj2 = [
        {
            imger: "/src/views/tb/imgs/书16.jpg",
            shuming: "乖呀乖",
            zuozhe: "万方"
        },
        {
            imger: "/src/views/tb/imgs/书17.jpg",
            shuming: "不做乖女孩",
            zuozhe: "莫拉·甘奇"
        },
        {
            imger: "/src/views/tb/imgs/书18.jpg",
            shuming: "半岛：食与自然",
            zuozhe: "解玉军"
        },
        {
            imger: "/src/views/tb/imgs/书19.jpg",
            shuming: "唐诗寒武纪",
            zuozhe: "王晓磊"
        },
        {
            imger: "/src/views/tb/imgs/书20.jpg",
            shuming: "梦旅店",
            zuozhe: "帕蒂·史密斯"
        },
    ]
    
    function fn(){
        if(el[el.index]){
            this.$router.push({path: '/wenmin'})
        }
    }
    
    </script>
    
    <template>
        <div>
            <img class="nuobeier" src="../imgs/诺贝尔文学(1).jpg">
            <!-- 新书快递模块 -->
            <div class="newbook">
                <!-- 新书快递模块----顶部导航栏 -->
                <div class="newbookdaohangtiao">
                    <div class="xskd">浏览图书</div>
    
                    <ul>
                        <li>
                            <router-link to="/quanbuyemian">全部</router-link>
                        </li>
                        <li>
                            <router-link to="/wenxue">文学</router-link>
                        </li>
                        <li><a href="">小说</a></li>
                        <li><a href="">历史文化</a></li>
                        <li><a href="">社会纪实</a></li>
                        <li><a href="">科学新知</a></li>
                        <li><a href="">艺术设计</a></li>
                        <li><a href="">商业经营</a></li>
                        <li><a href="">绘本漫画</a></li>
                        <li><a href="">更多>></a></li>
                    </ul>
                    <div class="hengxian"></div>
                    <!-- 书--选项 -->
                    <div class="Bigbox">
                        <div class="Dbook">
                            <div v-for="el in obj" class="book" @click="fn()">
                                <img :src="el.imger" alt="">
                                <div class="pailie">
                                    <div>{{el.shuming}}</div>
                                    <div>{{el.zuozhe}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="Dbook2">
                            <div v-for="el1 in obj2" class="book">
                                <img :src="el1.imger" alt="">
                                <div class="pailie">
                                    <div>{{el1.shuming}}</div>
                                    <div>{{el1.zuozhe}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>
    
            <router-view></router-view>
        </div>
    
    </template>
    
    <style scoped>
    .nuobeier {
        margin-top: 16px;
        margin-left: 250px;
    }
    
    /* 新书快递 */
    .newbook {
        margin-top: -110px;
        margin-left: 250px;
    }
    
    /* 新书快递模块----顶部导航条 */
    .newbookdaohangtiao {
        margin-top: 140px;
        width: 875px;
        height: 27px;
    }
    
    .xskd {
        font-size: 20px;
        font-weight: bolder;
    }
    
    .newbookdaohangtiao li {
        font-size: 13px;
        display: inline;
        list-style: none;
        margin: 60px 15px 15px 15px;
    }
    
    .newbookdaohangtiao a {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
    
    .newbookdaohangtiao a:hover {
        color: cornflowerblue;
    }
    
    .hengxian {
        margin-top: 5px;
        border-bottom: 1px solid rgb(223, 222, 222);
    }
    
    .Bigbox {
        margin-top: 10px;
        width: 1040px;
        height: 580px;
        background-color: rgb(240, 240, 240);
    }
    
    .Dbook {
        display: flex;
    }
    
    .book img {
        width: 134px;
        height: 178px;
        margin: 37px;
    }
    
    .pailie {
        margin-top: -30px;
        margin-left: 50px;
    }
    
    .Dbook2{
        display: flex;
    
    }
    </style>